import React from "react"
import {Image, View} from "@tarojs/components"
import {SightInfo} from '@/pages/Home/Home'
import './Recommend.scss'

interface Props {
  sightInfos: SightInfo[];
  mode?: 'mode1' | 'mode2';
  onselect(sightInfo: SightInfo): void
}

const Recommend: React.FC<Props> = ({sightInfos, mode= 'mode1', onselect}) => {
  return <View className='recommend'>
    {
      sightInfos.map(sightInfo => <View className='recommend_item'
        key={sightInfo.id}
        onClick={() => onselect(sightInfo)}
      >
        <Image className='recommend_item_bg' src={sightInfo.imgUrl} />
        {
          mode === 'mode1' ? <View className='recommend_item_wrap'>
            <Image className='recommend_item_image'  src={sightInfo.avatar} />
            <View className='recommend_item_title'>{sightInfo.name}</View>
            <View className='recommend_item_desc'>{sightInfo.summary}</View>
          </View> :
          <View className='recommend_item_wrap1'>
            <View className='recommend_item_title1'>{sightInfo.name}</View>
            <View className='recommend_item_info'>
              <Image className='recommend_item_info_image1'  src={sightInfo.avatar} />
              <View className='recommend_item_info_name1'>{sightInfo.name}</View>
              <View className='recommend_item_info_like iconfont'>&#xe99f;&nbsp;121</View>
            </View>
          </View>
        }
      </View>)
    }
  </View>
}

export default Recommend
